<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { reqRoleDelete, reqRoleList } from '@/api/acl/role'
import { ElMessage } from 'element-plus'
import type { Role } from '@/api/acl/role/type.ts'
import RoleForm from '@/views/acl/role/RoleForm.vue'
import { OPERATION_TYPE } from '@/api/type.ts'
import RolePermissionTree from '@/views/acl/role/RolePermissionTree.vue'

const keyword = ref<string>('')
let useKeyWord: string = ''

const currentPage = ref<number>(1)
const pageSize = ref<number>(10)
const total = ref<number>(0)

const roleList = ref<Role[]>([])
const roleFormRef = ref<any>()
const rolePermissionTreeRef = ref<any>()

let operate: OPERATION_TYPE = OPERATION_TYPE.ADD

const getRoleList = async (page = currentPage.value) => {
  currentPage.value = page
  try {
    const { code, data, message } = await reqRoleList(
      page,
      pageSize.value,
      useKeyWord,
    )
    if (code == 200) {
      roleList.value = data?.records
      total.value = data?.total
    } else {
      ElMessage.error(message)
    }
  } catch (e: any) {
    ElMessage.error(e?.message)
  }
}

const onSearch = () => {
  useKeyWord = keyword.value
  getRoleList(1)
}

const onSearchReset = () => {
  keyword.value = ''
  useKeyWord = ''
  getRoleList(1)
}

const onAddRole = () => {
  operate = OPERATION_TYPE.ADD
  roleFormRef.value.initRole()
}

const onAssignPermission = (row: Role) => {
  rolePermissionTreeRef.value.initPermission(row)
}

const onUpdateRole = (row: Role) => {
  operate = OPERATION_TYPE.UPDATE
  roleFormRef.value.initRole(row)
}

const onDeleteRole = async (row: Role) => {
  try {
    const { code, message } = await reqRoleDelete(row?.id as number)
    if (code == 200) {
      await getRoleList()
    } else {
      ElMessage.error(message)
    }
  } catch (e: any) {
    ElMessage.error(e?.message)
  }
}

const onPageChange = () => {
  getRoleList()
}

onMounted(() => {
  getRoleList()
})
</script>

<template>
  <div>
    <el-card>
      <el-form :inline="true">
        <el-form-item label="角色名">
          <el-input v-model="keyword" placeholder="请输入角色名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearch">搜索</el-button>
          <el-button @click="onSearchReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card>
      <el-button type="primary" icon="Plus" @click="onAddRole">
        添加角色
      </el-button>
      <!-- 角色列表 -->
      <el-table :data="roleList" border>
        <el-table-column type="index" label="#"></el-table-column>
        <el-table-column prop="id" label="id" width="80"></el-table-column>
        <el-table-column prop="roleName" label="角色名称"></el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          width="150"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="updateTime"
          label="更新时间"
          width="150"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column fixed="right" prop="" label="操作" width="300">
          <template #default="{ row }">
            <el-button
              type="primary"
              size="small"
              icon="User"
              @click="onAssignPermission(row)"
            >
              分配权限
            </el-button>
            <el-button
              type="primary"
              size="small"
              icon="Edit"
              @click="onUpdateRole(row)"
            >
              编辑
            </el-button>
            <el-popconfirm
              :title="`确认删除角色：${row?.roleName}？`"
              @confirm="onDeleteRole(row)"
              confirm-button-text="确认"
              cancel-button-text="取消"
              width="200"
            >
              <template #reference>
                <el-button type="danger" size="small" icon="Delete">
                  删除
                </el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[2, 5, 10, 15]"
        :total="total"
        :small="true"
        :background="true"
        layout="prev, pager, next, jumper, ->, total, sizes"
        @change="onPageChange"
      ></el-pagination>
    </el-card>
    <RoleForm
      :operate="operate"
      @get-role-list="getRoleList"
      ref="roleFormRef"
    ></RoleForm>
    <RolePermissionTree ref="rolePermissionTreeRef"></RolePermissionTree>
  </div>
</template>

<style scoped lang="scss"></style>
